<template>
  <el-table :data="products" stripe>
    <el-table-column prop="id" label="序号" align="center" />
    <el-table-column prop="title" label="商品名称" align="center" />
    <el-table-column prop="price" label="商品价格" align="center" />
    <el-table-column prop="number" label="库存" align="center" />
    <el-table-column label="操作" align="center">
      <template #default="scope">
        <el-button type="success" @click="addToCart(scope.row)">添加到购物车</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { onMounted } from 'vue'
import { getProducts } from '../api/product'
import { useShoppingCarStore } from '../stores/shoppingCar'
import { storeToRefs } from 'pinia'
const { products } = storeToRefs(useShoppingCarStore())
const { addToCart } = useShoppingCarStore()
onMounted(() => {
  getProducts().then((res) => {
    products.value = res
  })
})
</script>

<style lang="scss" scoped></style>
